'use client'
import React, { useEffect, useState } from 'react'
import style from './index.module.scss'
import TableComponent from '@/components/Table'
import { Button, Col, Divider, Input, Popconfirm, Row, Select, Space, Typography } from 'antd'
import { getDeviceInfoApi, getDeviceTypeApi, getDeviceTypeByIdApi, getDeviceByIdApi, deleteDeviceInfoApi, getDeviceInfoByIdApi, updateDeviceInfoApi, addDeviceInfoApi } from '@/apis/baseinfo'
import ChangeModel from '@/components/ChangeModel'

export default function Device() {
  // 当前页数
  const [pageNumber, setPageNumber] = useState(1)
  // 总记录数
  const [recordCount, setRecordCount] = useState(0)
  // 每页记录数
  const [pageSize, setPageSize] = useState(10)

  const [loading, setLoading] = useState(false)

  const getDateObj = {
    get1: (e, p) => { getData(e, p) },
    get2: (e, p) => { typeChange(type, e, p) },
    get3: (e, p) => { goSearch(e, p) }
  }
  const [getModel, setGetModel] = useState('get1')

  // 获取数据
  const getData = async (pageNum, count) => {
    setLoading(true)
    const res = await getDeviceInfoApi(pageNum, count)
    const resObj = await res.json()
    setPageNumber(resObj.current)
    setRecordCount(resObj.total)
    setPageSize(resObj.size)
    setDataSource(resObj.data.map(item => ({
      key: item.id,
      ...item
    })))
    setLoading(false)
  }

  // 列表数据源
  const [dataSource, setDataSource] = useState([])
  // columns数据
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '设备编号',
      dataIndex: 'device_id',
      key: 'device_id',
    },
    {
      title: '设备名称',
      dataIndex: 'device_name',
      key: 'device_name',
    },
    {
      title: '序列号',
      dataIndex: 'serial_number',
      key: 'serial_number',
    },
    {
      title: 'IP地址',
      dataIndex: 'ip_address',
      key: 'ip_address',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'operation',
      render: id => (
        <Space>
          <Button size='small' onClick={() => {
            console.log(id);
            
            setId(id)
            setMode('update')
            setShowChangeModel(true)
          }}>修改</Button>
          <Popconfirm
            title="提示"
            description="删除操作不可撤销!您确认吗？"
            okText='确认'
            cancelText='放弃'
            onConfirm={() => deleteResident(id)}
          >
            <Button size='small' danger type=''>删除</Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  // 分页信息
  const pagination = {
    current: pageNumber,
    defaultCurrent: 1,
    position: ['bottomRight'],
    total: recordCount,
    defaultPageSize: 10,
    pageSize: pageSize,
    showSizeChanger: true,
    onChange: (e, p) => getDateObj[getModel](e, p)
  }

  // 类别列表
  const [typeList, setTypeList] = useState([])
  // 当前类型
  const [type, setType] = useState('请选择')

  useEffect(() => {
    getData(pageNumber, pageSize)
      ; (async () => {
        const res = await getDeviceTypeApi()
        const resObj = await res.json()
        setTypeList(resObj.data)
      })()
  }, [])

  // 类型切换
  const typeChange = async (e, pageNumber, pageSize) => {
    setLoading(true)
    setType(e)
    const res = await getDeviceTypeByIdApi(e, pageNumber, pageSize)
    setPageNumber(res.current)
    setRecordCount(res.total)
    setPageSize(res.size)
    setDataSource(res.data.map(item => ({
      key: item.id,
      ...item
    })))
    setLoading(false)
    setGetModel('get2')
  }

  // 设备id
  const [devicesId, setDevicesId] = useState('')
  // 查询
  const goSearch = async (pageNumber, pageSize) => {
    setLoading(true)
    const res = await getDeviceByIdApi(devicesId, pageNumber, pageSize)
    setPageNumber(res.current)
    setRecordCount(res.total)
    setPageSize(res.size)
    setDataSource(res.data.map(item => ({
      key: item.id,
      ...item
    })))
    setLoading(false)
    setGetModel('get3')
  }

  // 删除一条数据
  const deleteResident = async id => {
    await deleteDeviceInfoApi(id)
    getDateObj[getModel](pageNumber, pageSize)
  }

  // id
  const [id, setId] = useState('')
  // ChangeModel的模式
  const [mode, setMode] = useState('add')
  // ChangeModel是否显示
  const [showChangeModel, setShowChangeModel] = useState(false)
  // 内容
  const titleList = [
    {
      title: '设备编号',
      dataIndex: 'device_id'
    },
    {
      title: '设备名称',
      dataIndex: 'device_name'
    },
    {
      title: '序列号',
      dataIndex: 'serial_number'
    },
    {
      title: 'IP地址',
      dataIndex: 'ip_address'
    },
    {
      title: '状态',
      dataIndex: 'status'
    },
    {
      title: '类型',
      dataIndex: 'type'
    }
  ]

  return (
    <div className={style['device_container']}>
      <Typography.Title level={3}>设备信息</Typography.Title>
      <Divider style={{ margin: '5px 0 10px', borderColor: '#7cb305', }}></Divider>
      <Row style={{ marginBottom: '10px' }}>
        <Col span={11}>

        </Col>
        <Col span={4}>
          <Select
            value={type}
            style={{ width: 160 }}
            options={typeList}
            onChange={e => typeChange(e)}
          />
        </Col>
        <Col span={5}>
          <Input value={devicesId} onChange={e => setDevicesId(e.target.value)} style={{ width: 200 }} placeholder='请输入设备编号或机号'></Input>
        </Col>
        <Col span={4}>
          <Space>
            <Button type='primary' onClick={() => goSearch(pageNumber, pageSize)}>查询</Button>
            <Button type='primary' onClick={() => {
              setShowChangeModel(true)
              setMode('add')
            }}>添加</Button>
          </Space>
        </Col>
      </Row>
      <TableComponent loading={loading} pagination={pagination} columns={columns} residentList={dataSource} />
      <ChangeModel addApi={addDeviceInfoApi} goSearch={() => { getDateObj[getModel](pageNumber, pageSize) }} changeApi={(values) => updateDeviceInfoApi(values, id)} method={getDeviceInfoByIdApi} titleList={titleList} id={id} mode={mode} isShow={showChangeModel} setIsShow={() => setShowChangeModel(false)} />
    </div>
  )
}
